<!-- CourseCenter_SelectCourseList.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>选课课程列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" href="../../css/weui.min.css">
    <link rel="stylesheet" href="../../css/mui.min.css"/>
    <link rel="stylesheet" href="../../css/base.css"/>
    <link rel="stylesheet" href="../../css/CFNetPP_Base.css">
    <style type="text/css">
        .mui-table-view {
            margin-left: 0;
        }

        .mui-table-view-cell > a:not(.mui-btn) {
            padding: 10px;
        }

        .mui-table-view-cell > a:not(.mui-btn) .course-img {
            display: block;
            width: 136px;
            max-width: 136px;
            height: 84px;
            background-image: url(../../image/course_placehoder.png);
            background-size: 136px 84px;
        }

        .mui-table-view-cell .top-content {
            height: 40px;
        }

        .mui-table-view-cell .bottom-content {
            /*padding-top: 16px;*/
            height: 44px;
        }

        .mui-table-view-cell > a:not(.mui-btn) .course_title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre-wrap;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 14px;
            color: #222;
            line-height: 20px;
        }

        .mui-table-view-cell > a:not(.mui-btn) .subtitle {
            color: #999;
            font-size: 12px;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            line-height: 14px;
        }

        /*.subtitle .right-span{
            margin-left: 10px;
        }*/
        .subtitle-red {
            color: #e10d20;
            font-size: 12px;
            margin: 0;
        }

        .cell-btn {
            font-size: 12px;
            font-weight: 400;
            line-height: 1.2;
            padding: 4px 6px;
            border-color: #1da4e8;
            background-color: #1da4e8;
            color: white;
            width: 70px;
        }

        .cell-btn:enabled:active {
            background-color: #2db4f8;
        }

        .bottom-content .cell-content-left {
            padding-right: 68px;
            float: left;
        }

        .bottom-content .cell-content-right {
            padding-top: 10px;
            width: 68px;
            height: 42px;
            float: right;
            position: absolute;
            right: 10px;
            top: 50px;
        }

        .button-super-div {
            padding: 2px 0;
        }

        .course-status-tag {
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-size: 12px;
            color: white;
            padding: 2px 4px;
            line-height: 1em;
            width: 136px;
            background-color: rgba(0, 0, 0, 0.5);
            text-align: center;
        }

        .course-status-tag-red {
            background-color: #EC1A2B;
        }

        .course-status-tag-green {
            background-color: #1DBF53;
        }

        .tag-img {
            width: 12px;
            height: 12px;
            margin-right: 4px;
        }

        .cell-btn {
            margin-right: 10px;
        }

        .info-span {
            margin-left: 10px;
        }

        .mui-table-view .mui-media-object.mui-pull-left {
            margin-right: 12px;
        }

        .top-p {
            margin-top: 10px;
        }

        .bottom-p {
            margin-top: 6px;
        }

        .mui-table-view-cell {
            padding: 10px;
        }

        .mui-table-view-cell.mui-checkbox.mui-left, .mui-table-view-cell.mui-radio.mui-left {
            padding-left: 50px;
        }

        .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before {
            position: absolute;
            top: 28px;
            left: -10px;
        }

        .mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {
            color: #18b4ed;
        }

        .add-btn {
            color: white;
            background-color: #18b4ed;
            border-color: #18b4ed;
            margin-top: 10px;
        }

        .add-btn:enabled:active {
            background-color: #08a4dd;
            border-color: #08a4dd;
        }

        .base_icon {
            width: 20px;
            margin-top: 12px;
        }

        .bottom-div {
            height: 40px;
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
        }

        .bottom-checkbox input[type=checkbox]:before {
            position: absolute;
            top: 0;
            left: -10px;
        }

        .bottom-left-div {
            margin-right: 100px;
            line-height: 24px;
            font-size: 14px;
            color: #222;
        }

        .bottom-right-div {
            width: 100px;
            float: right;
            font-size: 16px;
            background-color: #18b4ed;
            text-align: center;
            line-height: 40px;
            color: white;
        }

        .base_navigation_bar, #BarAppearance {
            z-index: 1;
        }

        .top-right-p {
            float: right;
        }

        .top-left-p {
            float: left;
        }

        .search-div {
            margin-left: 54px;
            width: calc(100% - 74px);
        }

        .mui-input-clear[type=search] {
            margin-top: 6px;
            margin-bottom: 0;
            background-color: white;
            color: #222;
            border-radius: 15px;
            height: 30px;
            font-size: 14px;
            text-align: left;
        }

        .search-icon {
            width: 20px;
            position: absolute;
            left: 4px;
            top: 11px;
        }

        .mui-table-view-cell > a:not(.mui-btn) {
            margin: -10px;
        }

        .price-span {
            color: #f80013;
        }
    </style>
</head>
<body>
<ul id="tesacherTableView" class="mui-table-view">
    <!-- <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <p class="course-status-tag">已结束</p>
            <img class="mui-media-object mui-pull-left course-img" src="../../image/list-default.png"/>
            <div class="mui-media-body top-content">
                <p class="course_title">课程名称</p>
            </div>
            <div class="mui-media-body bottom-content">
                <div class="top-p">
                    <p class="mui-ellipsis subtitle">
                        <span class="left-span">
                            任达华
                        </span>
                    </p>
                </div>
                <div class="bottom-p">
                    <p class="mui-ellipsis subtitle">
                        <span class="left-span"><img class="tag-img" src="../../image/icon_course_look.png">100人</span>
                        <span class="info-span"><img class="tag-img" src="../../image/icon_course_comment.png">10条</span>
                        <span class="info-span price-span">￥100</span>
                    </p>
                </div>
            </div>
        </a>
    </li> -->
</ul>
<div class="noSign" hidden="hidden" id="noData">
    <img src="../../image/icon_img.png" width="60%">
    <p class="font16 top_15 base_dark_grey">
        暂无数据
    </p>
</div>
<div class="loadFailure" hidden="hidden" id="noNet">
    <img src="../../image/icon_img01.png" width="60%">
    <p class="">
        数据加载失败
    </p>
    <p>
        请检查您的网络
    </p>
    <button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
        重新加载
    </button>
</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var page = 1;
    var rows = 10;
    var dropRefreshCount = 0;
    var courseDatas = new Array();
    var oneWeek = 7 * 24 * 60 * 60 * 1000;
    var firstLoad = true;
    var keyword = '';
    var categoryid = '573';//物流战略 默认选择物流战略
    apiready = function () {
        // $api.setStorage('cfnetppjxid', '174');
        // $api.setStorage('cfnetppuid', '16');
        prepareData();
        loadNewData();
        setRefreshHeader();
        setPullUpRefresh();
        setupNotifi();
    }

    function prepareData() {
        if (api.pageParam.categoryid != null) {
            categoryid = api.pageParam.categoryid;
        }
    }

    function setupNotifi() {
        api.addEventListener({
            name: 'searchCourseNotifi'
        }, function (ret, err) {
            keyword = ret.value.keyword;
            categoryid = '';
            refreshData();
        });
        api.addEventListener({
            name: 'courseCategoryNotifi'
        }, function (ret, err) {
            categoryid = ret.value.currentCategoryId;
            if (categoryid == 0) {
                categoryid = '';
            }
            keyword = '';
            refreshData();
        });
        api.addEventListener({
            name: 'refreshCourseListNotifi'
        }, function (ret, err) {
            loadNewData();
        });
    }

    function loadNewData() {
        page = 1;
        loadData();
    }

    function loadMoreData() {
        page++;
        loadData();
    }

    //下拉刷新
    function setRefreshHeader() {
        api.setRefreshHeaderInfo({
            visible: true,
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...',
            showTime: true
        }, function (ret, err) {
            loadNewData();
        });
    }

    // 上拉加载
    function setPullUpRefresh() {
        api.addEventListener({
            name: 'scrolltobottom'
        }, function (ret, err) {
            if (dropRefreshCount >= rows) {
                loadMoreData();
            }
        });
    }

    function setupCourseCount(count) {
        var isSearch = true;
        if (keyword == '') {//判断是否搜索条件下
            isSearch = false;
        }
        api.sendEvent({
            name: 'searchedCourseNotifi',
            extra: {
                isSearch: isSearch,
                count: count
            }
        });
    }

    function loadData() {
        if (firstLoad == true) {
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '加载中...',
                text: '',
                modal: false
            });
            firstLoad = false;
        }
        var param = {
            uid: $api.getStorage('cfnetppuid'),
            jid: $api.getStorage('cfnetppjxid'),
            keyword: keyword,
            categoryid: categoryid,
            record: 1,
            page: page,
            rows: rows
        };
        // console.log('选课列表接口:'+url_searchCourseList+'\n'+JSON.stringify(param));
        cfnetppPOST(url_searchCourseList, param, true, function (data, status) {
            api.refreshHeaderLoadDone();
            api.hideProgress();
            if (status == 'success') {
                if (data.status == true) {
                    if (page == 1) {
                        courseDatas = new Array();
                    }
                    setupCourseCount(data.count);
                    var courseList = data.data;
                    multiplePicturesCache({
                        picArr: courseList,
                        picKey: 'coverimages'
                    }, function (imageArr) {
                        courseList = imageArr;
                        if (courseList != null && courseList.constructor == Array && courseList.length > 0) {
                            var currentIndex = courseDatas.length;
                            dropRefreshCount = courseList.length;//设置当前下拉数
                            courseDatas = courseDatas.concat(courseList);
                            var courseHtmlString = new String();
                            for (var i = currentIndex; i < courseDatas.length; i++) {
                                var courseData = courseDatas[i];
                                courseHtmlString += courseHtmlWithData(courseData, i);
                            }
                            if (page == 1) {
                                $('#tesacherTableView').html(courseHtmlString);
                            } else {
                                $('#tesacherTableView').append(courseHtmlString);
                            }
                            addCellClick();
                            $('#noData').hide();
                            $('#noNet').hide();
                        } else {
                            if (page == 1) {
                                $('#tesacherTableView').html('');
                                $('#noData').show();
                                $('#noNet').hide();
                            }
                        }
                    });
                } else {
                    if (page == 1) {
                        setupCourseCount(0);
                        $('#tesacherTableView').html('');
                        $('#noData').show();
                        $('#noNet').hide();
                    } else {
                        // api.toast({
                        // 	msg : '获取数据失败'
                        // });
                    }
                }
            } else {
                if (page == 1) {
                    setupCourseCount(0);
                    $('#tesacherTableView').html('');
                    $('#noData').hide();
                    $('#noNet').show();
                } else {
                    api.toast({
                        msg: '网络异常'
                    });
                }
            }
        });
    }

    //添加点击事件
    function addCellClick() {
        $('.mui-table-view-cell').unbind('click');
        $('.mui-table-view-cell').click(function () {
            var index = $(this).attr('index');
            var data = courseDatas[parseInt(index)];
            if (data.types === 3) {
                //外链课程
                openOtherCourse(data.outurl);
            } else {
                data["courseid"] = data.cid;
                data["planid"] = "0";
                openMooc(data);
            }
        });
        sendBuriedNotifi(1, '选课列表页', '080');
    }

    function openOtherCourse(url) {
        api.openWin({useWKWebView:true,
            name: 'CourseCenter_Other',
            url: 'CourseCenter_Other.html',
            pageParam: {
                url: url
            }
        });
    }

    //打开mooc课程
    function openMooc(data) {
        data["userType"] = "student";
        data["sourceurl"] = window.location.pathname;
        data["sourcetitle"] = document.title;
        data["opentype"] = 'courseCenter';
        if (data.isselected == 1) {
            api.openWin({useWKWebView:true,
                name: 'Teacher_StudyCourseInfo',
                url: '../Teacher_Teach/Teacher_StudyCourseInfo.html',
                pageParam: data
            });
        } else {
            api.openWin({useWKWebView:true,
                name: 'CourseCenter_CourseDetail',
                url: 'CourseCenter_CourseDetail.html',
                pageParam: data
            });
        }
    }

    //时间标签
    function timeTitleWithEndTime(endTime) {
        var timeTitleHtml = '';
        var etime = parseInt(endTime) * 1000;//结束时间
        var nowTime = Date.parse(new Date());
        // alert("结束时间"+etime+'\n当前时间'+nowTime);
        if (etime <= nowTime) {
            timeTitleHtml = '<p class="course-status-tag">已结束</p>';
        } else {
            var tmpTime = etime - nowTime;
            if (tmpTime <= oneWeek) {
                var timeDate = new Date(etime);
                var timeMonth = timeDate.getMonth() + 1;
                var timeDay = timeDate.getDate();
                var timeTitle = timeMonth + '-' + timeDay + '到期';
                timeTitleHtml = '<p class="course-status-tag">' + timeTitle + '</p>';
            }
        }
        return timeTitleHtml;
    }

    function courseHtmlWithData(data, index) {
        var priceString = '';
        var price = data.score;
        if (price != null && price != '' && price != 0) {
            priceString = '<span class="info-span price-span">￥' + price + '</span>';
        }
        return '<li index="' + index + '" class="mui-table-view-cell mui-media">' +
            '<a href="javascript:;">' +
            // '<p class="course-status-tag">已结束</p>'+
            '<img class="mui-media-object mui-pull-left course-img" src="' + data.coverimages + '"/>' +
            '<div class="mui-media-body top-content">' +
            '<p class="course_title">' + data.coursename + '</p>' +
            '</div>' +
            '<div class="mui-media-body bottom-content">' +
            '<div class="top-p">' +
            '<p class="mui-ellipsis subtitle">' +
            '<span class="left-span">' +
            data.speaker +
            '</span>' +
            '</p>' +
            '</div>' +
            '<div class="bottom-p">' +
            '<p class="mui-ellipsis subtitle">' +
            '<span class="left-span"><img class="tag-img" src="../../image/icon_course_look.png">' + numNullStr(data.viewcount) + '人</span>' +
            '<span class="info-span"><img class="tag-img" src="../../image/icon_course_comment.png">' + numNullStr(data.commentcount) + '条</span>' +
            priceString +
            '</p>' +
            '</div>' +
            '</div>' +
            '</a>' +
            '</li>';
    }

    function minuteWithSecond(second) {
        // return (parseInt(second) / 60).toFixed(0);//该方法会四舍五入
        return parseInt(parseInt(second) / 60);
    }

    function imageUrlWithStr(string) {
        if (string.indexOf("http://") == -1) {
            // if (string.indexOf("learn/") == -1) {
            // 	return 'http://bos.cfnet.org.cn/' + string;
            // }else{
            return 'http://cfnet.org.cn/data/uploads/' + string;
            // }
        } else {
            return string;
        }
    }

    function refreshData() {
        firstLoad = true;
        loadNewData();
    }

    function numNullStr(str) {
        if (str == null || str == '' || str == undefined || str < 0) {
            return 0;
        }
        return str;
    }

    function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
        var userinfo = {
            uid: $api.getStorage('cfnetppuid'),
            jid: $api.getStorage('cfnetppjxid'),
            uname: $api.getStorage('cfnetppusername'),

        }
        var data = {
            busionessid: busionessid,
            pagetype: pagetype,
            pagetypeid: pagetypeid,
            sourceurl: api.pageParam.sourceurl,
            sourcetitle: api.pageParam.sourcetitle,
            accesspageurl: window.location.pathname,
            accesspagetitle: document.title,
            userinfo: userinfo
        }
        SendBehaviorTrajectoriesNotifi_Study(data);
    }
</script>
</html>